<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <script src="js/vue.global.js"></script>
    </head>
    <style>
        #app{
            text-align: center;
        }
        #app div{
            margin: 10px auto;
           
        }
    </style>
    <body>
        <div id="app">
            <label>宽度:</label><input v-model="w" type="number"><br>
            <label>高度:</label><input v-model="h" type="number"><br>
            <label>背景:</label><input v-model="bj" type="color"><br>
            <label>边框:</label>
            宽度<input v-model="border[0]" type="number">
            类型<select v-model="border[1]">
                <option value="solid">实线</option>
                <option value="dashed">虚线</option>
                <option value="dotted">点线</option>
                <option value="double">双实线</option>
            </select>
            颜色<input v-model="border[2]" type="color"><br>
            <label>圆角:</label>
            <input type="range" v-model="borderRadius[0]" min="0" max="50">
            <input type="range" v-model="borderRadius[1]" min="0" max="50"><br>
            <input type="range" v-model="borderRadius[2]" min="0" max="50">
            <input type="range" v-model="borderRadius[3]" min="0" max="50">
            <div :style="{
                width:w+'px',
                height:h+'px',
                background:bj,
                border:border[0]+'px '+border[1]+' '+border[2],
                borderRadius:borderRadius[0]+'%'+borderRadius[1]+'% '+borderRadius[2]+'%'+borderRadius[3]+'%'
            }"></div>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        w:300,
                        h:200,
                        bj:'pink',
                        border:[1,'solid','red'],
                        borderRadius:[0,0,0,0]
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>